<template>

  <div class='page white-stage'>
    <div class="container">
      <div class="subscribe-clients-list">
        <div :class="{'none':!clientList.length, 'hasSearch':isShowSearch }"
          :on-infinite="load" :on-refresh="refresh" ref="my_scroller" :noDataText="noDataText" >
            <group v-for="(client, index) in clientList" :key="index">
              <router-link class="link-block" :to="{name:'normal-clients-detail', query:{custom_id: client.id, custom_type:custom_type, id: client.id, call: 1}}">
                <cell title="昵称" :value="client.nick_name"></cell>
                <cell-form-preview :list="resolvePreviewData(client)"></cell-form-preview>
              </router-link>
            </group>
        </div>
      </div>
    </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar :activeItem="custom_type=='0' ? 'h5marketing' : 'marketing'"></crm-tabbar>
    <router-link v-if="custom_type==1 && selectFollow === false " class="new-add" :to="{path:'add-normal-client', query:{custom_type:custom_type}}">新增</router-link>
  </div>

</template>
<script>
  import crmTabbar from '../components/crm-tabbar'
  import crmCover from '../components/crm-cover'
  import topFilter from '../components/top-filter'
  import clientItem from '../components/client-item'
  // import { Group, Cell, CellFormPreview } from 'vux'
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import CellFormPreview from 'vux/src/components/cell-form-preview'

  import { mapField } from '../lib/backend'
  // import Scroller from 'vue-scroller'
  import {getCustomSource} from '../lib/client'
  // import dropdownOption from '../components/dropdown-option'
  // import { SHOW_COVER } from '../store/mutation-types'
  // import {loadTeamSettings, loadMemberSettings, loadFilterFunc} from '../lib/filter'
  import store from '../store'
  import SearchInput from '../components/SearchInput'
  import { resolveData } from '../lib/CellFormPreview'

  export default {
    data () {
      return {
        isMore: '',
        containerHeight: 'height:' + document.body.scrollHeight + 'px;',
        page_size: 15,
        page_index: 1,
        selectFollow: false,
        // activeItem: 'h5marketing',
        custom_type: 0,
        isShowSearch: false,
        noDataText: '',
        originNoDataText: '暂无数据',
        filterActiveItem: {},
        clientList: [],
        filterData: {},
        keyword: ''
      }
    },

    components: {
      crmTabbar,
      crmCover,
      topFilter,
      clientItem,
    // Scroller,
      SearchInput,
      Group,
      Cell,
      CellFormPreview
    },

    methods: {

      refresh (iscroll) {
        console.log('refresh')
        this.getCustoms()
      // Refresh current data
      },
      log () {
        console.log('ee')
      },

      load (iscroll) {
        this.getCustoms()
        // Load new data
      },
      test () {
        console.log('test')
      },

      resolvePreviewData (client) {
        return resolveData(client, {
          'parent_name': '家长姓名',
          'mobile_num': '手机号码',
          'scan_time': '面对面扫码时间'
        })
      },

      searchChange (value) {
        if (typeof this.sid !== 'undefined') {
          clearTimeout(this.sid)
        }

        this.sid = setTimeout(() => {
          if (!this.originClientList) {
            this.originClientList = this.clientList
          }
          this.emptyCustoms()
          this.keyword = value
          this.getCustoms()
        }, 1000)
      },

      mergeClientList (data) {
        if (!this.clientIDs) this.clientIDs = []
        let newClients = []

        data.forEach((client, index) => {
          console.log(this.clientIDs.indexOf(client.id), 'this.clientIDs.indexOf(client.id)')

          if (this.clientIDs.indexOf(client.id) === -1) {
            newClients.push(client)
            this.clientIDs.push(client.id)
          }
        })

        if (this.loadStatus === 'refresh') {
          this.clientList = newClients.concat(this.clientList)
        } else {
          this.clientList = this.clientList.concat(newClients)
        }
      },
      getCustoms (data) {
        let defaultData = {}
        let that = this

        // defaultData['custom_type'] = this.custom_type
        // defaultData['page_size'] = this.page_size
        // defaultData['page_index'] = this.page_index
        // defaultData['order_by'] = 0
        defaultData = mapField(this.$route.query, {site_id: 'site_id', batch_no: 'batch_no'})

        // if(this.custom_type === 1) defaultData['order_by'] = 3

        if (this.keyword) defaultData['keyword'] = this.keyword

        data = Object.assign(defaultData, this.filterData, data)

        console.log('getCustoms JSON.stringify(data)', JSON.stringify(data))

        store.dispatch('getSubscribeClients', data).then((response) => {
          if (response.data.errcode === 0) {
            console.debug('response.data.results.data', response.data.results.data)
            setTimeout(() => {
              that.mergeClientList(response.data.results)
              this.endLoading()
              that.page_index++
              if (that.clientList.length > 0) {
                that.noDataText = ''
              }
            }, 300)

            if (that.clientList.length) {
              that.noDataText = ''
            }
          } else {
            this.endLoading()
            console.debug('系统服务异常！请联系管理员!', response.data.errmsg)
          }
        }).catch((error) => {
          this.endLoading()
          console.debug('系统服务异常！请联系管理员!', error)
          console.log(error)
          // that.noDataText = ''
        })
      },

      endLoading () {
        setTimeout(() => {
          if (this.$refs.my_scroller) {
            this.$refs.my_scroller.finishInfinite(true)
            this.$refs.my_scroller.finishPullToRefresh()
          }
        }, 300)
      },
      isSameObj (obj1, obj2) {
        return JSON.stringify(obj1) === JSON.stringify(obj2)
      },

      emptyCustoms () {
        this.clientList = []
        this.clientIDs = []
        this.page_index = 1
      }
    },

    computed: {
      isShowCover () {
        return this.$store.state.app.isShowCover
      },
      loginUser () {
        return this.$store.state.app.user
      },
      filterOptions () {
        return this.$store.state.app.filterOptions
      }

    },
    watch: {
      filterOptions () {
        console.debug('gbfilterOptions')
      }
    },

    mounted () {
      let query = this.$route.query

      getCustomSource(store)

      this.noDataText = this.originNoDataText

      if (query.is_sf === 1) {
        this.selectFollow = true
      }

      this.custom_type = query.custom_type
      console.log(this.custom_type, 'this.custom_type')
      this.callJsApi('biz.navigation.setTitle', { title: '新关注客户' })
    }

  }
</script>
<style lang="less">

  @import "../less/base";

  .subscribe-clients-list {

    padding-top: 10px;

    .bg-white{
      background-color: white;
      padding: 5px 0;
      &:extend(.clearfix all);
      border-bottom: 1px solid #e0dcdc;

      .vux-x-icon {
      display: inline-block;
      vertical-align: middle;
      fill: #5AB1FF;
      margin-left: 8px;
      margin-right: 4px;
      }

    }

    .link-block {
      display: block;
      color: #999999;
    }

  }

  .new-add{
    position: fixed;
    z-index: 80;
    bottom: 60px;
    right: 26px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    padding: 2px;
    background-color: #fff;
    border: none;
    outline: none;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    font-weight: 700;
    display: block;
    line-height: 38px;
    text-align: center;
    background-color: #35ADFF;
    color: white;

  }

  .grey.container.pdt{
    padding-top: 18px;
  }


</style>
